<template>
  <!-- <van-popup v-model="value" class="popup" :close-on-click-overlay="false"> -->
  <!-- 第一步，绑定区域 -->
  <!-- <dialog-layout v-show="step == 1">
      <span slot="title">1.关注接种门诊</span>
      <span slot="tip">请选择您所属区域的接种门诊,以便接收最新公告消息,得到更加便携的接种服务.</span>
      <div slot="content">
        <clinic-select/>
      </div>
      <div style="text-align:center;" slot="handle">
        <van-button color="#FF6600" type="primary" size="small" @click="next">下一步</van-button>
      </div>
  </dialog-layout>-->
  <!-- 第二步，绑定接种人 -->
  <!-- <dialog-layout v-show="step == 2">
      <span slot="title">2.接种人管理</span>
      <span slot="tip">请您务必填写真实的接种者信息,以便能够顺利接种!</span>
      <div slot="content">
        <ValidationObserver
          ref="observer"
          v-slot="{ passes, invalid }"
          tag="form"
          @submit.prevent="submit()"
        >
          <van-cell-group>
            <ValidationProvider name="姓名" rules="required|isName" v-slot="{ errors }">
              <van-field
                v-model="form.name"
                placeholder="请输入姓名"
                label="姓名"
                clearable
                :error-message="errors[0]"
              />
            </ValidationProvider>

            <calendar/>

            <ValidationProvider name="联系方式" rules="required|isPhone" v-slot="{ errors }">
              <van-field
                v-model="form.phone"
                placeholder="请输入联系方式"
                label="联系方式"
                clearable
                :error-message="errors[0]"
              />
            </ValidationProvider>
          </van-cell-group>
        </ValidationObserver>
      </div>
      <div style="text-align:center;" slot="handle">
        <van-button color="#FF6600" type="primary" size="small" @click="start">开始使用</van-button>
      </div>
  </dialog-layout>-->
  <!-- </van-popup> -->
  <div>
    <!-- 重要提示 -->
    <van-dialog
      v-model="value"
      :title="title"
      :confirm-button-text="confirmButtonText"
      :before-close="beforeClose"
      :lazy-render="false"
    >
      <div class="dialog-content" v-if="step == 1">
        <!-- <clinic-select ref="clinicSelect"/> -->
        <van-form ref="form1">
          <area-select v-model="form.area"/>
          <clinic v-model="form.clinicId"/>
        </van-form>
      </div>
      <van-form v-else class="dialog-content">
        <van-form ref="form2">
          <van-field
            v-model="form.name"
            name="姓名"
            label="姓名"
            placeholder="姓名"
            :rules="[{ required: true, message: '请填写姓名' }, { validator:nameValidator, message: '请填写正确的姓名' }]"
          />
          <!-- <Calendar v-model="form.birthday"/> -->
          <DatePicker v-model="form.birthday"/>
          <van-field
            v-model="form.phone"
            name="手机号"
            label="手机号"
            placeholder="手机号"
            :rules="[{ required: true, message: '请填写联系方式' },{ validator, message: '请填写正确的手机号' }]"
          />

          <van-field name="checkbox" :rules="[{ required: true, message: '请勾选免责声明' }]">
            <template #input>
              <van-checkbox v-model="form.checked">
                我已阅读并同意
              </van-checkbox>
              <span @click="showAgree = true;" class="agree-btn">&lt;免责声明&gt;</span>
            </template>
          </van-field>
        </van-form>
      </van-form>
    </van-dialog>

    <van-dialog v-model="showAgree" title="免责声明" @confirm='showAgree = false;'>
      <div class="agree">
        <h2>温馨提示：</h2>
        <p>在您使用本网站前，请您务必仔细阅读并透彻理解本声明。如果您选择使用本网站进行预约，您的使用行为将被视为对本声明全部内容的认可。</p>
        <h4>1、责任限定</h4>
        <p>明确声明：我们不承担您因使用本网站而产生的直接、间接的或特殊的损失，包括因依赖从本网站获得的信息等而造成的损失。</p>
        <h4>2、个人资料保密</h4>
        <p>我们尊重并保护所有使用用户的个人隐私权，您注册的用户名、手机号码、身份证号等个人资料，非经您亲自许可或根据相关法律、法规的强制性规定，我们不会主动地泄露给第三方。同时我们温馨提醒您：也请您注意保护好您的个人信息。</p>
        <h4>3、不做任何形式的保证</h4>
        <p>我们提供接种预约平台，但不对任何用户在使用过程中做任何形式的保证。</p>
        <h4>4、不对门诊发布的内容审核负责</h4>
        <p>平台接收接种门诊发布的相关信息，但是平台对于接种门诊所做的内容及修改不承担审核责任。</p>
        <h4>5、不对第三方发布信息真实性负责</h4>
        <p>第三方（除本平台外的其他主体）通过平台发布的信息，本平台不对信息真实性负责，不承担因此给使用者造成的损失。</p>
        <h4>6、 接受声明</h4>
        <p>凡以任何方式登录本网站预约或直接、间接使用本网站资料者，视为自愿接受本声明的约束。我们不对您的任何行为承担责任。</p>
        <h4>7、 解释权</h4>
        <p>本免责声明以及其修改权、更新权及最终解释权均属预防与健康公众号所有。</p>
        <h4>8、 备注</h4>
        <p>本网站图片，文字之类版权申明，如果侵犯，请及时通知我们，本网站将在第一时间及时删除.</p>
      </div>
    </van-dialog>
  </div>
</template>

<script>
import router from "@/router";
import DialogLayout from "@/components/dialog";
import ClinicSelect from "@/components/clinicSelect";
import { ValidationObserver, ValidationProvider, extend } from "vee-validate";
import Calendar from "@/components/calendar";
import DatePicker from "@/components/datepicker";
import AreaSelect from "@/components/area";
import Clinic from "@/components/clinic";

import { follow, insertInoculationUser } from "@/api/user";
export default {
  data() {
    return {
      showAgree: false,
      value: this.open,
      step: 1,
      form: {},
      title: "1.关注接种门诊",
      confirmButtonText: "下一步"
    };
  },
  props: {
    open: {
      default: false
    }
  },
  watch: {
    open(val) {
      this.value = val;
    }
  },
  created() {},
  components: {
    DialogLayout,
    ClinicSelect,
    ValidationObserver,
    ValidationProvider,
    Calendar,
    AreaSelect,
    Clinic,
    DatePicker
  },
  methods: {
    show(opt) {
      this.value = true;
    },
    close() {
      this.value = false;
    },
    sure() {
      this.close();
      router.push("/home");
    },
    toAuth() {
      this.close();
      router.push("/userInfo");
    },
    next() {
      this.step = 2;
    },
    start() {},
    beforeClose(action, done) {
      if (action == "confirm") {
        if (this.step == 1) {
          this.$refs.form1.validate().then(res => {
            this.step = 2;
            this.title = "2.接种人管理";
            this.confirmButtonText = "开始使用";
          });
          done(false);
        } else if (this.step == 2) {
          const { clinicId, name, birthday, phone } = this.form;
          this.$refs.form2
            .validate()
            .then(res => {
              const a1 = follow({
                clinicId
              });
              const a2 = insertInoculationUser({
                name,
                birthday,
                phone
              });

              Promise.all([a1, a2])
                .then(res => {
                  console.log(res);
                  done();
                  this.$emit("submit");
                })
                .catch(err => {
                  done(false);
                });
            })
            .catch(err => {
              done(false);
            });
        }
      }
    },
    nameValidator(val) {
      return /^[\u4E00-\u9FA5]{2,6}$/.test(val);
    },
    validator(val) {
      return /^1[3456789]\d{9}$/.test(val);
    }
  }
};
</script>

<style lang='scss' scoped>
.agree{
  padding: .27rem /* 20/75 */;
  height: 12rem;
  font-size: .39rem /* 29/75 */;
  line-height: 1.6;
  overflow: auto;
  h4{
    margin-bottom: .27rem /* 20/75 */;
    font-weight: bold;
  }
  p{
    text-indent: 2em;
    margin-bottom: .27rem /* 20/75 */;
  }
}

.agree-btn{
  color: #0000FF;
}
</style>
